import './widegetLg.css'
import React from 'react'

export default function WidegetLg() {

    const Button = ({ type }) => {
        return <button className={"widgetLgButton "+ type}>{type}</button>

    };

    return (
        <div className='WidegetLg'>
           <h3 className="widgetLgTitle">Latest transactions</h3>
           <table className='widgetLgTable'>
                <tr className='widgetLgTr'>
                    <th className='widgetLgTh'>Customer</th>
                    <th className='widgetLgTh'>Date</th>
                    <th className='widgetLgTh'>Amount</th>
                    <th className='widgetLgTh'>Status</th> 
                </tr>
                <tr className='widgetLgTr'>
                    <td className="widgetLgUser">
                        <img src="https://img2.baidu.com/it/u=2721799434,423408480&fm=26&fmt=auto"
                         alt=""
                         className='widgetLgImg' />
                        <span className="widgetLgName">Susan Carol</span>
                    </td>
                    <td className="widgetLgDate">2 Jun 2021</td>
                    <td className="widgetLgAmount">$122.00</td>
                    <td className="widgetLStatus"><Button type="Approved"></Button></td>
                </tr>
                <tr className='widgetLgTr'>
                    <td className="widgetLgUser">
                        <img src="https://img1.baidu.com/it/u=2890484169,2011796888&fm=26&fmt=auto"
                         alt=""
                         className='widgetLgImg' />
                        <span className="widgetLgName">David Joe</span>
                    </td>
                    <td className="widgetLgDate">23 Jun 2021</td>
                    <td className="widgetLgAmount">$128.00</td>
                    <td className="widgetLStatus"><Button type="Declined"></Button></td>
                </tr>
                <tr className='widgetLgTr'>
                    <td className="widgetLgUser">
                        <img src="https://img1.baidu.com/it/u=3815354612,4228030034&fm=26&fmt=auto"
                         alt=""
                         className='widgetLgImg' />
                        <span className="widgetLgName">Megan Seven</span>
                    </td>
                    <td className="widgetLgDate">2 Jul 2021</td>
                    <td className="widgetLgAmount">$242.00</td>
                    <td className="widgetLStatus"><Button type="Prending"></Button></td>
                </tr>
                <tr className='widgetLgTr'>
                    <td className="widgetLgUser">
                        <img src="https://img1.baidu.com/it/u=1785892344,642648691&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500"
                         alt=""
                         className='widgetLgImg' />
                        <span className="widgetLgName">Mike Jackson</span>
                    </td>
                    <td className="widgetLgDate">2 Jun 2021</td>
                    <td className="widgetLgAmount">$122.00</td>
                    <td className="widgetLStatus"><Button type="Approved"></Button></td>
                </tr>
           </table>
        </div>
    )
}
